<template>

  <div class="app">
    <el-main>

      <el-form :inline="true" class="search-form" style="margin-top: 20px">
        <el-form-item label="系统ID号:">
          <el-input v-model="state.fgsid" placeholder="请输入系统ID号" style="width: 180px" clearable></el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="selectAlL">
            <el-icon style="vertical-align: middle">
              <Search />
            </el-icon>
            <span style="vertical-align: middle">查询</span>
          </el-button>
          <el-button type="primary" @click="createForm">
            <span style="vertical-align: middle">添加系统设置</span>
          </el-button>
        </el-form-item>
      </el-form>



      <el-table :data="state.tableData">
        <el-table-column label="id" prop="fid"></el-table-column>
        <el-table-column label="系统ID号" prop="fgsid"></el-table-column>
        <el-table-column label="端口号" prop="fcsz"></el-table-column>
        <el-table-column label="服务器端口类型" prop="fcshy"></el-table-column>



        <el-table-column label="操作">
          <template v-slot:default="{row}">
            <el-button type="primary" @click="handleEdit(row)">编辑</el-button>
            <el-button type="danger" @click="handleDelete(row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>



      <el-pagination background layout="sizes,prev, pager, next"
                     :page-sizes="[5, 10, 15, 20,30]"
                     v-model:current-page="state.pageNum"
                     v-model:page-size="state.pageSize"
                     :total="state.total1"
                     @size-change="handleSizeChange"
                     @current-change="handleCurrentChange" />
    </el-main>
  </div>


  <el-dialog v-model="dialogVisible" title="系统信息" @close="resetFormData">
    <el-form :model="state.formData">

      <el-form-item label="id:">
        <el-input v-model="state.formData.fid" style="width: 200px"></el-input>
      </el-form-item>
      <el-form-item label="系统ID号:">
        <el-input v-model="state.formData.fgsid" style="width: 200px"></el-input>
      </el-form-item>
      <el-form-item label="端口号:">
        <el-input v-model="state.formData.fcsz" style="width: 200px"></el-input>
      </el-form-item>
      <el-form-item label="服务器端口类型:">
        <el-input v-model="state.formData.fcshy" style="width: 200px"></el-input>
      </el-form-item>




    </el-form>

    <span  class="dialog-footer">
      <el-button @click="dialogVisible = false">取消</el-button>
      <el-button type="primary" @click="confirmLabel">确定</el-button>
    </span>

  </el-dialog>






</template>


<script setup>
import {computed, onMounted, reactive, ref, watchEffect} from "vue";
import request from "@/utils/request";
import {ElMessage, ElMessageBox} from "element-plus";
const state = reactive({
  fgsid:'',
  tableData : [],
  formData : {
    fgsid: null,
    fcsz: null,
    fcshy: null,
    fid:null
  },
  isEditing: false,
  total1:0,
  pageNum:1,
  pageSize:5
})


const handleSizeChange=(size)=>{
  state.pageSie=size;
  selectAlL()


}
const handleCurrentChange=(count)=>{

  state.pageNum=count;
  selectAlL()
}

const selectAlL=async ()=>{
  let paramas=new URLSearchParams();
  paramas.append("pageNum",state.pageNum);
  paramas.append("pageSize",state.pageSize);
  paramas.append("fgsid",state.fgsid?state.fgsid:'');


  await request.post("xtcs/selectALl",paramas).then(res=>{
    console.log(res.data)
    state.tableData=res.data.items;
    state.total1=res.data.total;
  })
}

const load = () => {
  selectAlL()
  // let paramas=new URLSearchParams();
  // paramas.append("pageNum",)
  // paramas.append("fgsid",state.fgsid)
  // request.post("xtcs/selectALl",paramas).then(res=>{
  //   state.tableData = res.data
  //   // total.value = res.data.data.total
  // })
}

onMounted(()=>{
  load()
})


//删除
const handleDelete = (row) => {
  // 显示确认对话框
  ElMessageBox.confirm('确定删除该记录吗?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(()=>{
    state.formData.fgsid = row.fgsid
    state.formData.fcsz = row.fcsz;
    state.formData.fcshy = row.fcshy;
    state.formData.fid= row.fid;


    request.post("xtcs/delete",state.formData).then(res=>{
        ElMessage.success('删除成功')
        load()
      }).catch(error=>{
        console.log(error);
        ElMessage.error('删除失败')
    })
    state.formData.fgsid = null;
    state.formData.fcsz = null;
    state.formData.fcshy = null;
    state.formData.fid= null;
  })
};

//表单
const dialogVisible = ref(false);

const addLabel = () => {

  request.post("xtcs/insert",state.formData ).then(res => {
      ElMessage.success('添加成功');
      load();
    }).catch(error =>{
      console.log(error);
      ElMessage.error('添加失败')
  })

  resetFormData();
  dialogVisible.value = false;
}

const updateLabel = () => {
  request.post("xtcs/update",state.formData ).then(res => {
      ElMessage.success('更新成功');
      load();
    }).catch(error => {
      console.log(error);
      ElMessage.error('更新失败')
  })

  resetFormData();
  dialogVisible.value = false;
};



const createForm =()=>{
  // state.formData.fbq = [{ value: '' }];
  state.isEditing = false; // 重置isEditing
  dialogVisible.value = true;
}

const resetFormData = () => {
  state.formData.fgsid = null;
  state.formData.fcsz = null;
  state.formData.fcshy = null;
  state.formData.fid = null;
  state.isEditing = false; // 重置isEditing
};

//编辑
const handleEdit = (row) => {
  // 填充表单数据

  dialogVisible.value = true;
  state.formData.fgsid = row.fgsid
  state.formData.fcsz = row.fcsz;
  state.formData.fcshy = row.fcshy;
  state.formData.fid = row.fid;

  state.isEditing = true; // 设置isEditing为true
};

const confirmLabel = () => {
  if (state.isEditing) {
    updateLabel();
  } else {
    addLabel();
  }
};

</script>

<style>
</style>
